import React, { useState } from 'react';
import {Link}from 'react-router-dom';
import {Button,Space, DatePicker,Table,Tag,Pagination,Input, 
} from 'antd';
import { AudioOutlined } from '@ant-design/icons'
import moment from 'moment';

 
const YiLiaoKaGuanLi = () => {
{/*查询 */}
const { Search } = Input;
const suffix = (
  <AudioOutlined
    style={{
      fontSize: 16,
      color: '#1890ff',
    }}
  />
);
const onSearch = value => console.log(value);
{/*日历 */}
const { RangePicker } = DatePicker;
function onChange(dates, dateStrings) {
  console.log('From: ', dates[0], ', to: ', dates[1]);
  console.log('From: ', dateStrings[0], ', to: ', dateStrings[1]);
}
 {/*表格 */}
 const { Column, ColumnGroup } = Table;
 const data = [
  {
    key: '1',
    name: '路飞',
    kaHao: '00001',
    age: 32,
    tel:'1234534536',
    address: '海贼王世界新航路1008号',
    tags: ['是'],
  },
  {
    key: '2',
    name: '卫庄',
    kaHao: '00002',
    age: 42,
    tel:'1234534536',
    address: '秦时明月世界纵横路2号',
    tags: ['否'],
  },
  {
    key: '3',
    name: '张大仙',
    kaHao: '00003',
    age: 32,
    tel:'11433223',
    address: '娱乐世界峡谷边路688',
    tags: ['否'],
  },
  {
   key: '4',
   name: '香吉士',
   kaHao: '00004',
   age: 22,
   tel:'11433223',
   address: '娱乐世界峡谷边路688',
   tags: ['否'],
 },
 {
   key: '5',
   name: '宇智波鼬',
   kaHao: '00005',
   age: 18,
   tel:'11433223',
   address: '娱乐世界峡谷边路688',
   tags: ['否'],
 },

 {
   key: '6',
   name: '墨鸦',
   kaHao: '00006',
   age: 28,
   tel:'11433223',
   address: '娱乐世界峡谷边路688',
   tags: ['否'],
 },
 {
   key: '7',
   name: '墨鸦',
   kaHao: '00007',
   age: 28,
   tel:'11433223',
   address: '娱乐世界峡谷边路688',
   tags: ['否'],
 },
 {
   key: '8',
   name: '墨鸦',
   kaHao: '00008',
   age: 28,
   tel:'11433223',
   address: '娱乐世界峡谷边路688',
   tags: ['否'],
 },
 {
   key: '9',
   name: '墨鸦',
   kaHao: '00009',
   age: 28,
   tel:'11433223',
   address: '娱乐世界峡谷边路688',
   tags: ['否'],
 },
 {
   key: '10',
   name: '墨鸦',
   kaHao: '000010',
   age: 28,
   tel:'11433223',
   address: '娱乐世界峡谷边路688',
   tags: ['否'],
 },
 {
   key: '11',
   name: '墨鸦',
   kaHao: '000011',
   age: 28,
   tel:'11433223',
   address: '娱乐世界峡谷边路688',
   tags: ['否'],
 },
];

    return (
      <>     
      <h2>医疗卡管理</h2>
      {/*查询 */}
      <Search placeholder="姓名/卡号" 
      style={{width:'250px',marginRight:'20px'}}   
      onSearch={onSearch} enterButton />  
      {/*日历 */}
        <Space direction="vertical" size={12}>
    <RangePicker
      ranges={{
        Today: [moment(), moment()],
        'This Month': [moment().startOf('month'), moment().endOf('month')],
      }}
      onChange={onChange}
    />
  </Space>
      <Link  to='/mz/tj'> <Button type="primary" ghost style={{float:'right',margin:'0 10px 20px 0'}}>添加</Button></Link>          
      <Link  to='/mz/gs'><Button type="primary" danger style={{float:'right',marginRight:'20px'}}>挂失</Button></Link>
       {/*表格 */}
      <Table dataSource={data}>   
         <Column title="卡号" dataIndex="kaHao" key="kaHao" />
         <Column title="姓名" dataIndex="name" key="name" />
         <Column title="年龄" dataIndex="age" key="age" />
         <Column title="地址" dataIndex="address" key="address" />
         <Column title="电话" dataIndex="tel" key="tel" />
         <Column title="是否欠款" dataIndex="tags" key="tags"
          render={tags => (
        <>
          {tags.map(
              tag => (<Tag color="blue" key={tag}> {tag}</Tag>)
            )}
        </>
      )}
    />
          <Column title="操作" key="action"
      render={(text, record) => (
        <Space size="middle">
          <Link  to='/mz/mx'><Button type="primary" danger>查看</Button></Link>
        </Space>
      )}
    />
  </Table> 
  <Pagination
      total={data.length}
      showSizeChanger
      showQuickJumper
      showTotal={total => `共 ${total} 条`}
    />    
      </>
    );
   
}


export default YiLiaoKaGuanLi;
